<template>
  <view class="page-content" v-if="isLoaded">
    <view class="pd-20 card fweigh-600">
      <view class="flex justify-between">
        <text>累计会员数</text>
        <text>{{ pageData.count }}</text>
      </view>
      <view class="mt-40 mb-10 flex justify-between">
        <text>累计余额</text>
        <text>{{ pageData.balance.toFixed(2) }}</text>
      </view>
      <view class="mt-40 flex justify-between">
        <text>累计储值金额</text>
        <text>{{ pageData.recharegeBalance.toFixed(2) }}</text>
      </view>
      <view class="mt-40 flex justify-between">
        <text>累计赠送金额</text>
        <text>{{ pageData.giftBalance.toFixed(2) }}</text>
      </view>
    </view>
    <u-calendar
      :show="showCalendar"
      :mode="mode"
      :monthNum="13"
      @confirm="confirmDateRange"
      :allowSameDay="true"
      @close="showCalendar = false"
    />
  </view>
</template>

<script>
import date from "@/utils/date";
import { uShowLoading, uHideLoading } from "../../../utils/uniUtils";
export default {
  data() {
    return {
      isLoaded: false,
      pageData: {},
      param: {
        dataTimeRange: [date.getToday(), date.getToday()],
      },
    };
  },
  async onLoad() {
    try {
      uShowLoading();
      await this.getPageData();
      this.isLoaded = true;
      uHideLoading();
    } catch (error) {
      console.log("error", error);
    } finally {
      this.isLoaded = true;
      uHideLoading();
    }
  },
  methods: {
    async getPageData() {
      const res = await this.$api.GetUserBalanceTotal(this.param);
      this.pageData = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20rpx;
  .card {
    padding: 40rpx;
    border-radius: 6rpx;
    background-color: #fff;
  }
}
</style>
